<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" lang="es_ES" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
		<title>Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</title>
	
		<meta name="author" content="Runroom http://www.runroom.com" />
		<meta name="language" content="es_ES" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

		<!-- hojas de estilo //-->
<!-- 
		<link media="all" rel="stylesheet" href="css/pre-v3.css">
 -->
		<link media="all" rel="stylesheet" href="css/styles.css" />
		<link media="all" rel="stylesheet" href="css/custom.css" />
		<link media="all" rel="stylesheet" href="css/qp-v3.css" />
		<link media="all" rel="stylesheet" href="css/user-backoffice.css" />

		<!-- conditional comment: CSS para Explorer 7 y menor //-->
			<!--[if lte IE 7]>
				<link rel="stylesheet" href="css/ie7menos.css" />
			<![endif]-->
	
		<!-- incluir scripts //-->
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ABQIAAAAzClpJywkGASi3cdCCxdvnBRyVQWqmkHGDTi57WK1YtyDytrQIhQNeQ5HGi7cnaGyd90vRPydCOgxrA&amp;sensor=false&amp;language=es_ES&amp;v=3.1&amp;region=ES"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/locationSelector.js"></script>
		<script type="text/javascript" src="js/jquery.flip.min.js"></script>
		<script type="text/javascript" src="js/jquery.countdown.js"></script>
		<script type="text/javascript" src="js/jquery.countdown-es_ES.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
		<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
		<script type="text/javascript" src="js/localscroll.js"></script>
		<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
		<script type="text/javascript" src="js/jquery.fullscreenr.js"></script>	
		<script type="text/javascript" src="js/qp_tabs.js"></script>
		<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="js/fileuploader.js"></script>
		<script type="text/javascript" src="js/s3Capcha.js"></script>
		<script type="text/javascript" src="js/feeds.js"></script>
		<script type="text/javascript" src="js/feeds_home.js"></script>
		<!-- end incluir scripts //-->


	<script type="text/javascript">
		function verdetalles(id) {
			$('#detalles_' + id).slideToggle('fast');
			$('#det_trigger_' + id).toggleClass('clicked');
		}

		function cerrardetalles(id) {
			$('#detalles_' + id).slideUp('fast');
			$('#det_trigger_' + id).removeClass('clicked');
		}
		function modificarMail(id){
			$('#email_'+id).text($('#detalles_'+ id +' input').val());
			cerrardetalles(id);
		}
		
		function modificarTel(id){
			$('#telefono_'+id).text($('#detalles_' + id + ' select option:selected').text()+ ' - ' +$('#detalles_'+ id +' input').val());
			cerrardetalles(id);
		}
		/* Abrir o cerrar "más info" slide */
		function toggleInfo(id) {
			// abrir / cerrar div.lamasinfo y anadir/quitar class "open" al/del enlace (a)
			$('#cont_' + id).slideToggle('fast');
			if($('#mas_' + id).html()== '[detalles]') {
				$('#mas_' + id).html('[ocultar]');
			} else {
				$('#mas_' + id).html('[detalles]');
			}
			$('#mas_' + id).toggleClass('open');
		}
	
		function toggleNotificaciones(id){
			if($('input[name=chk_'+id+']').is(':checked')){
				$('#notificaciones_'+id+' li').each(function(){
					$(this).removeClass('inactivo');
					$(this).contents().find('input').removeAttr('disabled');
				});
			} else {
				$('#notificaciones_'+id+' li').each(function(){
					$(this).addClass('inactivo');
					$(this).contents().find('input').attr('disabled','disabled');
					$(this).contents().find('input').attr('checked',false);
				});
			}
		}
	
		$(document).ready(function() {
			// cerrar ventanita emergente detalles
			$(".caja").mouseleave(function() {
			//	$('.detalles').slideUp('fast');
			//	$('.disponible').removeClass('clicked');
			});
			
			/*$(".navi").mousedown(function() {
				$('.detalles').slideUp('fast');
				$('.disponible').removeClass('clicked');
			});*/
	
			// animacion de la tarjeta
			//Ocultamos desplegables
			$(".conect_cont").hide();
			
			$("#volver").hide();
			$("#back").hide();
			$("#info").click(function() {
				$("#info").hide();
				$("#tarjeta").flip({
					direction : 'lr',
					onEnd : function() {
						$("#tarjeta").css('background-color', 'transparent');
						$("#front").hide();
						$("#back").show();
						$("#volver").show();
					}
				});
			});
			$("#volver").click(function() {
				$("#volver").hide();
				$("#tarjeta").flip({
					direction : 'rl',
					onEnd : function() {
						$("#tarjeta").css('background-color', 'transparent');
						$("#front").show();
						$("#back").hide();
						$("#info").show();
					}
				});
			});
		});
	</script>




	</head>
	
	<body>
		<a name="top"></a>
		<div id="fb-root"></div>
	
		<noscript>
			<div id="aviso_js">
				<p>Lo sentimos, pero esta web sólo funciona con Javascript activado.</p>
			</div>
		</noscript>

		<!-- conditional comment: aviso para Explorer 6 y menor //-->
			<!--[if lte IE 6]>
				<div id="aviso_ie">
					<p><strong>Hemos detectado que utilizas Internet Explorer 6</strong>, un navegador obsoleto, con problemas de seguridad y compatibilidad conocidos.</p>
					<p>Recomendamos que actualices tu navegador <a href="http://www.browserchoice.eu">en la web de browserchoice.org, haciendo clic aquí</a></p>
				</div>
			<![endif]-->

		<div class="header">
			<div class="session-links">
				<a title="Accede a tu cuenta Qporama" href="registro">Inicia sessión</a>
				<a title="Crea una cuenta Qporama" href="registro">Regístrate</a>
			</div> <!-- / .social-links -->	
			
			<div class="social-links">
				<a title="Visita la página Facebook de Qporama" class="facebook" href="facebook"><span>facebook</span></a>
				<a title="Visita la página Twitter de Qporama" class="twitter" href="twitter"><span>twitter</span></a>
			</div> <!-- / .social-links -->	
	
	
			<h2 class="logo_claim">
				<a class="logo" name="top" title="volver a la página de inicio" href="index.html">
					<span class="hidden">Qporama: Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</span>
				</a>
			</h2>
			<h1 class="claim">
				Conecta con tus <strong>marcas</strong> favoritas y <br />accede a <strong>regalos</strong> y ofertas <strong>exclusivas</strong>
			</h1>
		</div> <!-- / .header -->
	
		<div class="fondo-pagina" style="background: url(css/css_images/fondo-home-beige.jpg);">
			<div class="gradient">&nbsp;</div>
		</div>


		<div class="user">
			<div class="profile">
				<p class="profile-pic"><span class="corners w50px l"><img id="profile-img-photo-booth" src="images/male.png" alt="Matteo Monti" width="50px" height="50px" /><span class="cornersgris"></span></span></p>
				<p><span class="bienvenido">Bienvenido, <strong>Matteo Monti</strong>!</span> <small class="bot-salir"><b></b><a href="/login/logout">Salir</a></small></p>
				<p class="mis_cosas">
					<span><b></b><a href="/account/profile">mi perfil</a></span> 
					<!-- TODO: variable para saber si tiene o no alguna compra --> 
					<span><b></b><a href="/account/index">mis compras</a></span> <span class="active"><b></b><a href="/account/index">mis tarjetas</a></span>
				</p>
			</div> <!-- cerrar profile //-->
			<div class="mensajes">
				<h2 class="titulo-principal">Conéctate con tus redes preferidas</h2>
				<p class="soft">Gana puntos cada vez que compartas alguna cosa con tus amigos.</p>
			</div> <!-- cerrar mensajes //-->
		</div> <!-- cerrar user //-->
		


		<div class="buscar">
			<form action="#" method="get">
				<p class="fondo-input-buscar l"><input type="text" id="buscar" value="Busca un negocio o una oferta" /></p>

				<ul class="fondo-select selecciona-categoria">
					<li class="catselector-link" onclick="$('#CatSelector').slideToggle('fast');">Selecciona una categoría
						<ul id="CatSelector">
							<li><a title="Moda y Complementos" href="#">Comer y beber</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
						</ul>
					</li>
				</ul>

				<p class="fondo-select l" style="position: relative; left: -2px; z-index: 0;"><input type="text" id="location_selector_ciudad" value="Barcelona" /> <small><a id="location_selector_ciudad_cambiar" href="javascript:;">[cambiar]</a></small></p>
				<p class="boton secundario grande l"><input type="submit" value="buscar" /></p>
			</form>
		</div> <!-- cerrar buscar //-->

<!-- aqui empieza el div class="page -->

<div class="page">
		<!-- columna de contenido principal //-->
		<div class="c-960">
			<!-- columna de contenido ancho gris, tipo "login" //-->
			<div class="caja c960 f1f1f1 contabs">
				<div class="content">

					<ul id="tabs">
						<li class="tab"><a class="tablink" href="#tabs-1">Mis datos personales</a></li>
						<li class="tab active"><span class="tablink">Configurar notificaciones</span></li> 
						<li class="tab"><a class="tablink" href="#tabs-3">Configurar redes sociales</a></li>
					</ul><!-- cerrar tabs //-->

					<div class="formulario ancho" style="padding-top: 0;">		

						<div class="socialcont sinborder">
							<h4>Enviar notificaciones por E-Mail a</h4>
							<p>
								<img src="css/css_images/mail-icon.png" alt="E-Mail" />
								<span id="email_1" class="email">maria@gmail.com</span>
								<small class="cambiardatos"><a href="#" onclick="verdetalles(1); return false;" id="det_trigger_1">[cambiar]</a></small>
							</p> <!-- cerrar .cabecera //-->
	
						<!-- ventanita emergente 1 //-->
							<div id="detalles_1" class="detalles azul">
								<h4>Actualiza tu E-Mail</h4>
								<fieldset>
									<p style="padding-top: 20px;"><label for="email">E-Mail</label></p>
									<p class="fondo-input"><input type="text" value="maria@gmail.com" id="email" required="required" name="email" rel="tooltip" title="Escribe tu E-mail" /></p>
									<p class="boton primario pequeno" style="display: block; float: left; width: 100px; margin: 10px 10px 10px 0;"><a href="#" onclick="modificarMail(1);return false;">actualizar</a></p>
									<p style="display: block; float: left; width: auto; height: 20px; line-height: 20px; margin: 10px;"><a href="#" title="cancelar" onclick="verdetalles(1); return false;">cancelar</a></p>
								</fieldset>
								<div class="clear">&nbsp;</div>
								<div class="det-cierre"></div>
							</div> <!-- cerrar .detalles //-->
	
	
							<div class="clear">&nbsp;</div>
						</div> <!-- cerrar .socialcont //-->



						<div class="socialcont sinborder">
							<h4>Enviar notificaciones por SMS a</h4>
							<p>
								<img src="css/css_images/cell-icon.png" alt="Móvil" />
								<span id="telefono_2" class="fon">España (+34) - 627638900</span>
								<small class="cambiardatos"><a href="#" onclick="verdetalles(2); return false;" id="det_trigger_2">[cambiar]</a></small>
							</p> <!-- cerrar .cabecera //-->
	
						<!-- ventanita emergente 2 //-->
							<div id="detalles_2" class="detalles azul">
								<h4>Actualiza tu Número de teléfono</h4>
								<form action="#" method="post">
									<fieldset>
										<p style="padding-top: 20px;"><label for="country">Prefijo Internacional</label></p>
										<p class="fondo-input">
											<select id="country" name="country" required="required" rel="tooltip" title="Selecciona tu país">
												<option value="0">Selecciona prefijo</option>
												<option value="1" selected="selected">España (+34)</option>
												<option value="2">Finlandia (+56)</option>
												<option value="3">Groenlandia (+32)</option>
												<option value="4" >Hungria (+12)</option>
												<option value="5">Italia (+65)</option>
											</select>
										</p>
										<p><label for="numero">Tu número</label></p>
										<p class="fondo-input"><input type="text" value="627638900" id="numero" required="required" name="numero" rel="tooltip" title="Escribe tu Número de teléfono" /></p>

										<p class="boton primario pequeno" style="display: block; float: left; width: 100px; margin: 10px 10px 10px 0;"><a href="#" onclick="modificarTel(2);return false;">actualizar</a></p>
										<p style="display: block; float: left; width: auto; height: 20px; line-height: 20px; margin: 10px;"><a href="#" title="cancelar" onclick="verdetalles(2); return false;">cancelar</a></p>
									</fieldset>
								</form>
								<div class="clear">&nbsp;</div>
								<div class="det-cierre"></div>
							</div> <!-- cerrar .detalles //-->
	
							<div class="clear">&nbsp;</div>
						</div> <!-- cerrar .socialcont //-->

						<h4>Comunicados</h4>
						<ul class="notificaciones">
							<li>
								<p class="pqarial">
									<label for="newsletter">
										<input type="checkbox" checked="checked" name="newsletter" id="newsletter" /> &nbsp;
										Deseo recibir la newsletter
									</label>
								</p>
							</li>
							<li>
								<p class="pqarial">
									<label for="oferta">
										<input type="checkbox" name="oferta" id="oferta" /> &nbsp;
										Deseo recibir ofertas
									</label>
								</p>
							</li>
						</ul>


						<h5 style="padding-top: 20px;">Frecuencia</h5>
						<ul class="notificaciones">
							<li>
								<p class="pqarial">
									<label for="p_diario">
										<input type="radio" name="periodo" id="p_diario" value="diario" checked="checked" />&nbsp;
										diario (1 comunicado al día)
									</label>
								</p>
							</li>
							<li>
								<p class="pqarial">
									<label for="p_semanal">
										<input type="radio" name="periodo" id="p_semanal" value="semanal" />&nbsp;
										semanal (1 comunicado por semana)
									</label>
								</p>
							</li>
							<li>
								<p class="pqarial">
									<label for="p_mensual">
										<input type="radio" name="periodo" id="p_mensual" value="mensual" />&nbsp;
										mensual (1 comunicado al mes)
									</label>
								</p>
							</li>
						</ul>
			


						<h4 style="padding-top: 20px;">Notificaciones</h4>
						<table width="405" border="0" align="left" cellpadding="0" cellspacing="0" class="configura">
							<tr>
								<td align="left"><p class="tit">Enviar cuando</p></td>
								<td align="center" width="40" height="40"><img src="css/css_images/mail-icon_p.png" alt="E-Mail" /><br /><small>E-mail</small></td>
								<td align="center" width="40" height="40"><img src="css/css_images/cell-icon_p.png" alt="Móvil" /><br /><small>SMS</small></td>
							</tr>

							<tr>
								<td class="it_chk"><p class="pqarial">(des)activar <b>todas</b></p></td>
								<td align="center"><input type="checkbox" name="m-todos" id="m_t" /></td>
								<td align="center"><input type="checkbox" name="f-todos" id="f_t" /></td>
							</tr>

							<tr>
								<td class="it_chk"><p class="pqarial">se publique una nueva <b>tarjeta</b></p></td>
								<td align="center"><input type="checkbox" name="m_1" id="m_1" /></td>
								<td align="center"><input type="checkbox" name="f_1" id="f_1" /></td>
							</tr>
							<tr>
								<td class="it_chk"><p class="pqarial">se publique una nueva <b>oferta</b> de una de mis tarjetas</p></td>
								<td align="center"><input type="checkbox" name="m_2" /></td>
								<td align="center"><input type="checkbox" name="f_2" /></td>
							</tr>
							<tr>
								<td class="it_chk"><p class="pqarial">se publique una nueva <b>foto</b> de una de mis tarjetas</p></td>
								<td align="center"><input type="checkbox" name="m_3" /></td>
								<td align="center"><input type="checkbox" name="f_3" /></td>
							</tr>
							<tr>
								<td class="it_chk"><p class="pqarial">se realice un <b>check-in</b> de una de mis tarjetas</p></td>
								<td align="center"><input type="checkbox" name="m_4" /></td>
								<td align="center"><input type="checkbox" name="f_4" /></td>
							</tr>
							<tr>
								<td class="it_chk"><p class="pqarial">se añada un <b>usuario</b> a una de mis tarjetas </p></td>
								<td align="center"><input type="checkbox" name="m_5" /></td>
								<td align="center"><input type="checkbox" name="f_5" /></td>
							</tr>
							<tr>
								<td class="it_chk"><p class="pqarial">se realice un <b>evento</b> en una de mis tarjetas</p></td>
								<td align="center"><input type="checkbox" name="m_6" /></td>
								<td align="center"><input type="checkbox" name="f_6" /></td>
							</tr>
						</table>							

						<div class="clear">&nbsp;</div>
		
						<div class="botonera sinborder">
							<p class="boton primario grande" style="display: block; float: left; width: 162px; margin: 20px 20px 20px 0;"><a href="#">actualizar datos</a></p>
							<p style="display: block; float: left; width: auto; height: 42px; line-height: 42px; margin: 20px;"><a href="#" title="cancelar">cancelar</a></p>
						</div> <!-- cerrar .botonera //-->
		
					</div> <!-- cerrar div formulario grande //-->
				<div class="clear">&nbsp;</div>
			</div> <!-- cerrar content //-->
			<div class="cierre"></div>
		
			</div> <!-- cerrar caja c960 f1f1f1 //-->
		</div> <!-- cerrar columna de 960px de ancho //-->
	</div> <!-- cerrar page //-->

	<div id="gototop">
		<p><a href="#top">volver arriba</a></p>
	</div>

</body>
</html>
